<template>
  <!-- 首页 -->
  <div id="homepage">
    <!-- 搜索框 -->
    <div style="height:1.333rem;"></div>
    <div class="boxseach" @click="$router.push('/searchIndex')">
      <div class="div-search">
        <div class="text">搜索达人/商品/直播</div>
        <img src="@/assets/two/seach.png" alt />
      </div>
      <!-- <search
        v-model="valueSerach"
        :active="active"
        @returnBack="returnBack"
        @returnBack1="returnBack1"
      />-->
    </div>
    <!-- banner图 -->
    <div class="banner box">
      <van-swipe class="my-swipe bannbox" :autoplay="4000" indicator-color="white">
        <template v-for="item,idx in H5banner">
          <van-swipe-item class="bann" @click="goPage(item)" :key="'ban'+idx">
            <img :src="item.h5Img" />
          </van-swipe-item>
        </template>
        <!-- <van-swipe-item class="bann" @click="gotosearch">
          <img src="@/assets/two/banner2.png" />
        </van-swipe-item> -->
      </van-swipe>
      <!-- <img src="@/assets/two/homepageban.png" alt /> -->
    </div>
    <!-- 直播+商品+达人+素材的分析 -->
    <div class="analysis box" v-if="navitationList">
      <!-- <div class="analysis box" v-if="0"> -->
      <div
        v-for="(item, i) in navitationList['selectedNavigation']"
        :key="i + 'i'"
        class="analy"
        @click="$router.push(item.path)"
      >
        <div class="img_box">
          <img :src="item.icon" alt />
        </div>
        <p>{{ item.name }}</p>
      </div>
      <div class="analy" @click="$router.push('/navSettings')">
        <div class="img_box">
          <img src="@/assets/three/allIcon.png" alt />
        </div>
        <p>全部</p>
      </div>
      <!-- <div class="analy" @click="$router.push('/goods')">
        <img src="@/assets/two/shopping.png" alt />
        <p>商品分析</p>
      </div>
      <div class="analy" @click="$router.push('/talent')">
        <img src="@/assets/two/talent.png" alt />
        <p>达人分析</p>
      </div>-->
      <!-- <div class="analy"
           @click="$router.push('/sucai')">
        <img src="@/assets/two/douyin.png"
             alt="">
        <p>抖音素材</p>
      </div>-->
    </div>
    <div class="analysis_skeleton" v-else>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
    <p class="bgbg"></p>
    <!-- 直播销量榜 -->
    <div class="live">
      <div class="h3 box">
        <h3>直播带货榜</h3>
        <p class="boximg" @click="$router.push('/liveRank?tab=0')">
          更多
          <img src="@/assets/two/youhua/more.png" alt="更多" />
        </p>
      </div>
      <div class="liveslide">
        <div class="boxlive" v-if="hotRoomShow.length">
          <div class="box03Item" v-for="(item, index) in hotRoomShow" :key="'r' + index">
            <div class="bgImg" @click="lives(item.author_id, item.room_id)">
              <div class="img_box">
                <img v-lazy="item.room_logo" />
                <div class="zhibo" v-if="item.status == 1">
                  <div class="liveAnimation">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                  <!-- <p class="livingGif">
                    <span></span>
                    <span></span>
                    <span></span>
                  </p>-->
                </div>
              </div>
              <div class="mask"></div>
            </div>
            <div class="live_text">
              <van-swipe
                class="my-swipe"
                :show-indicators="false"
                :autoplay="3000"
                vertical
                :touchable="false"
                indicator-color="white"
              >
                <van-swipe-item>
                  <p>销售额</p>
                  <p>{{ format_num(item.live_sales) }}</p>
                </van-swipe-item>
                <van-swipe-item>
                  <p>销量</p>
                  <p>{{ format_num(item.live_volume) }}</p>
                </van-swipe-item>
              </van-swipe>
            </div>
          </div>
        </div>
        <div class="boxlive_skeleton" v-else>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <p class="bgbg"></p>
    </div>
    <!-- 商品排行榜 -->
    <div class="good">
        <div class="h3 box">
          <h3>商品排行榜</h3>
          <p class="boximg" @click="$router.push('/goods?tab=goodsTiktokSales')">
            更多
            <img src="@/assets/two/youhua/more.png" alt="更多" />
          </p>
        </div>
        <div class="bgboxgood">
          <div class="goodslide" v-if="hotgoods && hotgoods.length">
            <div class="boxitem" v-for="(item, index) in hotgoods" :key="'r' + index">
              <div class="img_box">
                <img :src="item.logo" @click="goods(item.pro_id)" />
              </div>
              <h4 @click="goods(item.pro_id)">{{ item.title }}</h4>
              <p>
                <span class="num">
                  <span class="mark">￥</span>{{ item.price }}
                </span>
                <span>{{ format_num(item.sale_incr) }}日销量</span>
              </p>
            </div>
          </div>
          <div class="goods_skeleton" v-else>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
    </div>
    <p class="bgbg"></p>
    <!-- 达人排行榜 -->
    <div class="talent">
      <div class="h3 box">
        <h3>达人排行榜</h3>
        <p class="boximg" @click="$router.push('/talent?tab=0')">
          更多
          <img src="@/assets/two/youhua/more.png" alt="更多" />
        </p>
      </div>
      <div
        class="boxtalent box"
        v-for="(item, i) in talentList"
        :key="i + 't'"
        @click="todatails(item.authorId)"
      >
        <!-- 左侧 -->
        <div class="left">
          <div class="rank" :class="sstt[i]" v-if="i <= 8">
            <p :class="num[i]">{{ i + 1 }}</p>
          </div>
          <div class="rank1" v-else>
            <p :class="num[i]">{{ i + 1 }}</p>
          </div>
          <div class="img">
            <van-image round :src="item.logo" />
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <div class="wid">
            <p class="name">{{ item.nickName }}</p>
            <span>作品数：{{ item.totalVideo }}</span>
          </div>
          <div class="total">
            <p class="num">{{ format_num(item.totalFans) }}</p>
            <span>粉丝总数</span>
          </div>
        </div>
      </div>
    </div>
    <p class="bgbg"></p>
    <!-- 小店排行榜 -->
    <div class="talent">
      <div class="h3 box">
        <h3>小店排行榜</h3>
        <p class="boximg" @click="$router.push('/goods?tab=newbrand')">
          更多
          <img src="@/assets/two/youhua/more.png" alt="更多" />
        </p>
      </div>
      <div
        class="boxtalent box"
        v-for="(item, i) in shopList"
        :key="i + 'i'"
        @click="goshopdatails(item.shopId)"
      >
        <!-- 左侧 -->
        <div class="left">
          <div class="rank" :class="sstt[i]" v-if="i <= 8">
            <p :class="num[i]">{{ i + 1 }}</p>
          </div>
          <div class="rank1" v-else>
            <p :class="num[i]">{{ i + 1 }}</p>
          </div>
          <div class="img">
            <van-image round :src="item.shopLogo" />
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <div class="wid">
            <p class="name">{{ item.shopTitle }}</p>
            <span>预估销量：{{ format_num(item.volume) }}</span>
          </div>
          <div class="total">
            <p class="num">{{ format_num(item.amount) }}</p>
            <span>预估销售额</span>
          </div>
        </div>
      </div>
    </div>
    <p class="bgbg"></p>
    <!-- 热门视频榜 -->
    <div class="talent">
      <div class="h3 box" @click="$router.push('/hotRank?tab=0')">
        <h3>热门视频榜</h3>
        <p class="boximg" @click="$router.push('/hotRank?tab=0')">
          更多
          <img src="@/assets/two/youhua/more.png" alt="更多" />
        </p>
      </div>
      <div
        class="boxtalent box"
        v-for="(item, i) in videoList"
        :key="i + 'ta'"
        @click="govideodatails(item.aweme_id)"
      >
        <!-- 左侧 -->
        <div class="left">
          <div class="rank" :class="sstt[i]" v-if="i <= 8">
            <p :class="num[i]">{{ i + 1 }}</p>
          </div>
          <div class="rank1" v-else>
            <p :class="num[i]">{{ i + 1 }}</p>
          </div>
          <div class="img img_hov">
            <img :src="item.thum_pic" v-errorImg:video/>
            <img src="../../assets/two/youhua/playstar.png" class="palystar" />
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <div class="wid">
            <p class="name">{{ item.title }}</p>
            <span>评论数：{{ format_num(item.comment_count) }}</span>
          </div>
          <div class="total">
            <p class="num">{{ format_num(item.favorite_count) }}</p>
            <span>点赞数</span>
          </div>
        </div>
      </div>
    </div>
    <div class="invitation_enter_icon" @click="$router.push({path:'/invitation',query:{'invitecode':invitecode}})" v-if="invitecode"></div>
  </div>
</template>
<script>
import search from '@/component/search_my';
export default {
  name: 'demo',
  components: { search },
  data() {
    return {
      navitationList: null,
      valueSerach: '',
      active: '',
      keyword: '',
      hotRoomShow: [],
      cancel02: null,
      hotgoods: [],
      talentList: [],
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      num: ['num1', 'num2', 'num3'],
      Time: '',
      shopList: [],
      videoList: [],
      H5banner:null,
      invitecode:'',
    };
  },
  watch: {
    active: function (newValue, oldValue) {
      this.valueSerach = '';
      this.keyword = '';
      this.get_data();
    }
  },
  created() {
    this.getNavitation();
  },
  mounted() {
    this.getday();
    this.getRoom(); //直播销量榜
    this.PostRankList();  //商品排行榜
    this.GetTalentList(); // 达人排行榜
    this.getshoplist(); //小店排行榜
    this.getvideoList(); //视频排行榜
    this.getBanner(); //banner图
    this.getInviterCode();  //获取邀请码
  },
  methods: {
    getInviterCode(){
      this.$axios.get('/api/customer/GetInviterCode').then((res)=>{
        if(res && res.data && res.data.code == '0'){
          this.invitecode = res.data.data.invitecode;
        }
      });
    },
    getBanner() {
      this.$axios
        .post("/api/Activities/GetActivities", {
          Module: 1,
          Platform: 1,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.H5banner = res.data.data;
          }
        });
    },
    // 导航
    getNavitation() {
      this.$axios.get('/api/customer/getNavitation').then(res => {
        if (res.data.code == 0) {
          this.navitationList = res.data.data;
        }
      });
    },
    // 头部搜索栏
    returnBack(a) {
      this.page = 1;
      this.keyword = a;
      let str = this.trimStr(this.keyword).substr(0, 100);
      // let str = this.str
      // let theKeywords = ''
      // 对搜索词编码  escape不对* @ - _ + . / 编码 所以单独转
      // theKeywords = encodeURIComponent(str)
      // console.log(encodeURIComponent(str))
      // if (this.keyword.indexOf('*') > -1) {
      //   theKeywords = this.keyword.replace(/\*/g, '%2A')
      // }
      // if (this.keyword.indexOf('@') > -1) {
      //   theKeywords = this.keyword.replace(/\@/g, '%40')
      // }
      // if (this.keyword.indexOf('-') > -1) {
      //   theKeywords = this.keyword.replace(/\-/g, '%2D')
      // }
      // if (this.keyword.indexOf('_') > -1) {
      //   theKeywords = this.keyword.replace(/\_/g, '%5F')
      // }
      // if (this.keyword.indexOf('+') > -1) {
      //   theKeywords = this.keyword.replace(/\+/g, '%2B')
      // }
      // if (this.keyword.indexOf('.') > -1) {
      //   theKeywords = this.keyword.replace(/\./g, '%2E')
      // }
      // if (this.keyword.indexOf('/') > -1) {
      //   theKeywords = this.keyword.replace(/\//g, '%2F')
      // }
      // if (this.keyword.indexOf('%') > -1) {
      //   theKeywords = this.keyword.replace(/\%/g, '%25')
      // }
      if (this.keyword != '') {
        this.$router.push({
          path: `/myheader?keyword=${str}`
        });
      }
    },
    returnBack1(a) {
      this.keyword = a;
    },
    search() {
      this.valueSerach = this.trimStr(this.valueSerach);
      this.page = 1;
      this.keyword = String(this.valueSerach);
      this.get_data();
    },
    navToSearch() {
      this.valueSerach = this.trimStr(this.valueSerach);
      this.page = 1;
      this.keyword = String(this.valueSerach);
      this.get_data();
    },
    //跳转达人详情
    todatails(id) {
      this.$router.push({ path: '/talentDetailsMain', query: { id } });
    },
    //跳转小店详情
    goshopdatails(id) {
      this.$router.push({ path: '/shop_details', query: { id } });
    },
    //跳转视频详情
    govideodatails(id) {
      this.$router.push({ path: '/videodetailsMain', query: { id } });
    },
    //跳转商品详情
    goods(id) {
      this.$router.push({ path: '/goodsDetailsMain', query: { id: id } });
    },
    //跳转直播详情
    lives(author_id, room_id) {
      this.$router.push({
        path: '/liveBigScreenMain',
        query: { id: room_id }
      });
    },
    goPage(item){
      if(item.url){
        if(item.url[0] == '/'){ //本项目页面地址  '/xxx'
          if(item.url.indexOf('buyVip') > -1){  //如果是购买续费页面则通过路由名称跳转
            this.$router.push({
              name: 'buyVip',
              params:{
                sourceBanner:1
              }
            });
          }else{
            this.$router.push({
              path: item.url
            });
          }
        }else{  //可以理解为三方链接
          location.href = item.url;
        }
      }
    },
    //跳转 搜索详情页
    gotosearch() {
      this.$router.push({
        path: '/searchIndex'
      });
    },
    //跳转 实时直播热榜
    gotolive() {
      this.$router.push({
        path: '/liveRank'
      });
    },
    // 搜索框的搜索接口
    get_data() {
      let that = this;
      this.loading = true;
      this.is_show_result = true;
      this.loading_01 = true;
      this.$axios({
        method: 'get',
        url: '/api/search',
        params: {
          keyword: that.keyword
        }
      })
        .then(response => {
          if (response.data && response.data.code == 0) {
            this.loading = false;
            this.response = response.data.data;
            this.loading_01 = false;
          } else if (response.data.code == 1003) {
            this.loading = false;
            this.loading_01 = false;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 直播销量榜
    getRoom() {
      let that = this;
      that.$axios
        .get('/api/live/GetLiveProHourRankAnonymous', {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel02 != null) {
              that.cancel02();
            }
            that.cancel02 = c;
          })
        })
        .then(res => {
          if (res.data.code == 0) {
            that.roomList = res.data.data;
            if (that.roomList.length > 6) {
              that.hotRoomShow = that.roomList.slice(0, 6);
            } else {
              that.hotRoomShow = that.roomList;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品排行榜
    PostRankList() {
      let that = this;
      // 时间 13:00前只能看前两天的 13:00后看前一天的
      let time = new Date();
      let d = new Date();
      let h = d.getHours();
      // if (h >= 13) {
      //   time = that.timestamp(Number(new Date()) / 1000 - 24 * 60 * 60, 'Y-M-D');
      // } else {
      //   time = that.timestamp(Number(new Date()) / 1000 - 48 * 60 * 60, 'Y-M-D');
      // }

      // 默认展示前天数据
      time = that.timestamp(Number(new Date()) / 1000 - 24 * 60 * 60, 'Y-M-D');

      that.$axios
        .post('/api/product/PostDYVolumeRanksAnonymous', {
          CategoryId: 0,
          categoryIds:[],
          RankType: 1,
          ProFrom: -1,
          Gender: '不限',
          Age: '不限',
          Time: time, //时间
          Keyword: '',
          Index: 1,
          SortValue:1,
          Size: 6,
          type: 1,
        })
        .then(res => {
          if (res.data.code == 0) {
            this.hotgoods = this.hotgoods.concat(res.data.data.ranks);
          }
        })
        .catch(err => {});
    },
    //达人排行榜
    GetTalentList() {
      let that = this;
      this.$axios
        .post('/fansRankAnonymous', {
          // date: this.Time, //时间
          category: 0,
          fans: 0,
          favorite: 0,
          isshop: 0,
          listtype: 0,
          pageindex: 1,
          pagesize: 5,
          rankType: 1,
          video: 0
        })
        .then(res => {
          if (res.data.code == 0) {
            let listData = res.data.data.list;
            this.talentList = listData && listData.length > 5 ? listData.slice(0,5):[];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 小店排行榜
    getshoplist() {
      this.$axios
        .post('/api/shop/searchAnonymous', {
          date: this.Time,
          categoryId: '0',
          key: '',
          sort: 5,
          orderBy: 0,
          pageIndex: 1,
          pageSize: 5
        })
        .then(res => {
          if (res && res.data.code == 0) {
            this.shopList = res.data.data.shopList;
          }
        });
    },
    // 视频排行榜
    getvideoList() {
      this.$axios
        .post('/api/aweme/searchAnonymous', {
          keyword: '',
          size: 5,
          page: 1,
          category: 0,
          duration: '不限',
          favorite_count: '不限',
          is_pro: 0,
          more_age: '不限',
          more_gender: 3,
          more_province: '不限',
          more_city: '不限',
          time: '24h',
          order_by: 'desc',
          sort: 'favoriteCount'
        })
        .then(res => {
          if (res.data.code == 0) {
            this.videoList = res.data.data;
          }
        });
    },
    // 获取时间
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      let h = today.getHours();
      var i;
      if (h > 13) {
        var i = 1;
      } else {
        i = 2;
      }

      return tYear + '-' + tMonth + '-' + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = '0' + month;
      }
      return m;
    },
    //当前日默认时间
    getday() {
      this.Time = this.getDay(-1);
    }
  }
};
</script>
<style scoped lang="less">
#homepage {
  padding-bottom: 1.333333rem;
  .boxseach {
    width: 100%;
    background: #fff;
    position: fixed;
    z-index: 22;
    top: -0.08rem;
    padding: 13px 0.4rem .14rem;
    box-sizing: border-box;
    // div搜索
    .div-search {
      padding: 0 0.48rem 0 0.425rem;
      background: #f1f1f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 0.453333rem;
      box-sizing: border-box;
      .text {
        width: 85%;
        height: 0.906667rem;
        border-radius: 0.453333rem;
        border: none;
        font-size: 0.33rem;
        line-height: 0.95rem;
        color: #c4c0c4;
      }
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
  .box {
    width: 9.44rem;
    margin: 0 auto;
  }
  // banner图
  .banner {
    width: 9.226rem;
    height: 3.04rem;
    margin-bottom: 0.666rem;
    .bannbox,
    .bann {
      width: 9.226rem !important;
      height: 3.04rem !important;
      border-radius: 0.2rem;
      background-color: #efefef;
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  // 直播+商品+达人+素材
  .analysis {
    display: flex;
    // justify-content: center;
    flex-wrap: wrap;
    .analy:last-of-type {
      margin-right: 0;
    }
    .analy {
      // width: 1.84rem;   //四个图标
      width: 25%; //3个图标
      // margin-right: 0.613rem;
      text-align: center;
      .img_box {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        margin-bottom: 0.133333rem;
        img {
          display: block;
          width: 100%;
          height: 100%;
          // margin: 0 0.3rem;   //四个图标
          // margin: 0 0.74rem; // 三个图标
        }
      }
      p {
        font-size: 0.32rem;
        height: 0.346667rem;
        line-height: 0.346667rem;
        text-align: center;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #222;
        padding-bottom: 0.666667rem;
      }
    }
  }
  .analysis_skeleton {
    display: flex;
    // justify-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 4.32rem;
    padding: 0 0.4rem 0;
    box-sizing: border-box;
    i {
      display: inline-block;
      width: 25%; //3个图标
      height: 2rem;
      text-align: center;
      &:last-child {
        margin-right: 0;
      }
      &::before {
        content: '';
        display: inline-block;
        width: 1.36rem;
        height: 1.36rem;
        background-color: #efefef;
        border-radius: 0.106667rem;
      }
    }
  }
  // 直播销量榜
  .live {
    .h3 {
      display: flex;
      justify-content: space-between;
      h3 {
        height: 0.4rem;
        line-height: 0.4rem;
        font-family: PingFangSC-Medium;
        font-size: 0.4rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        padding-left: 0.266rem;
        position: relative;
      }
      h3:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0.42rem;
        display: inline-block;
        width: 0.053333rem;
        height: 0.346667rem;
        background-color: #fd7f2c;
        border: 1px solid #fd7f2c;
        border-radius: 3px;
      }
      .boximg {
        width: 1.4rem;
        height: 100%;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        text-align: right;
        font-size: 0.346667rem;
        color: #fd7f2c;
        img {
          display: inline-block;
          margin-left: 0.08rem;
          margin-top: -0.06rem;
          width: 0.213333rem;
          height: 0.32rem;
        }
      }
    }
    //直播销量榜展示
    .liveslide {
      width: 100%;
      .boxlive::-webkit-scrollbar {
        display: none;
      }
      .boxlive {
        overflow-x: auto;
        white-space: nowrap;
        margin-bottom: 0.2rem;
        margin-top: -0.16rem;
        padding: 0.15rem 0 0.15rem 0.4rem;
        .box03Item {
          display: inline-block;
          width: 2.853rem;
          height: 4rem;
          margin-right: 0.266rem;
          background-color: #ffffff;
          box-shadow: 0px 0px 0.133rem 0.08rem #f1f1f1;
          border-radius: 0.266rem;
          padding: 0.08rem;
          box-sizing: border-box;
          position: relative;
          > .bgImg {
            width: 2.666667rem; //200
            height: 3.2rem; //240
            margin: 0 auto;
            position: relative;
            .img_box {
              width: 100%; //214
              height: 100%; //268
              border-radius: 0.26rem 0.26rem 0px 0px;
              overflow: hidden;
              // 直播标识 符
              .zhibo {
                position: absolute;
                top: 0.1333rem;
                right: 0.1333rem;
                width: 0.4rem;
                height: 0.4rem;
                z-index: 2;
                background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2),
                  linear-gradient(#fff, #fff);
                background-blend-mode: normal, normal;
                border-radius: 3px;
                font-size: 10px;
                color: #fff;
              }
            }
            img {
              width: 100%; //214
              height: 100%; //268
              object-fit: cover;
            }
            .mask {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: rgba(20, 20, 12, 0.2);
              border-radius: 0.213333rem;
            }
          }
        }
      }
      // 盒子骨架
      .boxlive_skeleton {
        overflow-x: auto;
        white-space: nowrap;
        margin-bottom: 0.4rem;
        margin-top: -0.16rem;
        // padding: 0.066667rem 0 0.066667rem 0.4rem;
        font-size: 0;
        padding: 0.15rem 0 0.15rem 0.4rem;
        div {
          display: inline-block;
          width: 2.853rem;
          height: 4rem;
          margin-right: 0.266rem;
          background-color: #efefef;
          // box-shadow: 0px 0px 0.133rem 0.08rem #f1f1f1;
          border-radius: 0.266rem;
          padding: 0.08rem;
          box-sizing: border-box;
        }
      }
    }
  }
  // 商品排行榜
  .good {
    width: 100%;
    .h3 {
      display: flex;
      justify-content: space-between;
      h3 {
        height: 0.4rem;
        line-height: 0.4rem;
        font-family: PingFangSC-Medium;
        font-size: 0.4rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        padding-left: 0.266rem;
        position: relative;
      }
      h3:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0.42rem;
        display: inline-block;
        width: 0.053333rem;
        height: 0.346667rem;
        background-color: #fd7f2c;
        border: 1px solid #fd7f2c;
        border-radius: 3px;
      }
      .boximg {
        width: 1.4rem;
        height: 100%;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        text-align: right;
        font-size: 0.346667rem;
        color: #fd7f2c;
        img {
          display: inline-block;
          margin-left: 0.08rem;
          margin-top: -0.06rem;
          width: 0.213333rem;
          height: 0.32rem;
        }
      }
    }
    .bgboxgood {
      width: 100%;
      .goodslide:first-of-type {
        margin-left: 4%;
      }
      .goodslide::-webkit-scrollbar {
        display: none;
      }
      .goodslide {
        max-width: 9.6rem;
        overflow-y: hidden;
        overflow-x: auto;
        display: flex;
        > .boxitem {
          width: 3.2267rem;
          margin-right: 0.4rem;
          .num{
            font-size: .4133rem;
            color: #ff0000;
          }
          .mark{
            font-size: .28rem;
            color: #ff0000;
          }
          .img_box {
            width: 3.2267rem;
            height: 3.2267rem;
            border-radius: 0.266667rem;
            text-align: center;
            background-color: #f6f6f6;
            overflow: hidden;
            img {
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }
          h4 {
            width: 100%;
            line-height: 0.666667rem;
            font-size: 0.32rem;
            font-weight: normal;
            color: #222222;
            text-align: center;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          p {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: 0.426667rem;
            color: #ff0000;
            padding-bottom: 0.4rem;
            > span {
              display: block;
              font-size: 0.266667rem;
              color: #888;
              // padding-top: 0.106667rem;
            }
          }
        }
      }
    }
    .goods_skeleton{
      overflow-x: auto;
      white-space: nowrap;
      margin-bottom: 0.4rem;
      margin-top: -0.16rem;
      // padding: 0.066667rem 0 0.066667rem 0.4rem;
      font-size: 0;
      padding: 0.15rem 0 0.15rem 0.4rem;
      div {
        display: inline-block;
        width: 3rem;
        height: 3rem;
        margin-right: .4rem;
        background-color: #efefef;
        // box-shadow: 0px 0px 0.133rem 0.08rem #f1f1f1;
        border-radius: 0.266rem;
        padding: 0.08rem;
        box-sizing: border-box;
      }
    }
  }
  // 达人排行榜
  .talent {
    width: 100%;
    .h3 {
      display: flex;
      justify-content: space-between;
      h3 {
        height: 0.4rem;
        line-height: 0.4rem;
        font-family: PingFangSC-Medium;
        font-size: 0.4rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        padding-left: 0.266rem;
        position: relative;
      }
      h3:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0.42rem;
        display: inline-block;
        width: 0.053333rem;
        height: 0.346667rem;
        background-color: #fd7f2c;
        border: 1px solid #fd7f2c;
        border-radius: 3px;
      }
      .boximg {
        width: 1.4rem;
        height: 100%;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        text-align: right;
        font-size: 0.346667rem;
        color: #fd7f2c;
        img {
          display: inline-block;
          margin-left: 0.08rem;
          margin-top: -0.06rem;
          width: 0.213333rem;
          height: 0.32rem;
        }
      }
    }
    .boxtalent:last-of-type {
      border-bottom: none;
    }
    .boxtalent {
      width: 9.2rem;
      display: flex;
      margin-bottom: 0.2rem;
      border-bottom: 1px solid #e5e5e5;
    }
    .left {
      width: 1.68rem;
      position: relative;
      .img {
        width: 1.333333rem;
        height: 1.3333rem;
        margin: 0.4rem 0 0.4rem 0.133rem;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        .van-image--round {
          width: 100%;
          height: 100%;
        }
      }
      .palystar {
        position: absolute;
        top: 0.85rem;
        left: 0.55rem;
        width: 0.586667rem;
        height: 0.586667rem;
      }
      .rank {
        position: absolute;
        top: 0.24rem;
        left: 0;
        z-index: 1;
        width: 0.52rem;
        height: 0.52rem;
        background: url(../../assets/two/fire.png) no-repeat center;
        background-size: 100% 100% !important;
        p {
          font-size: 0.373333rem;
          text-align: center;
          line-height: 0.56rem;
          color: #666666;
          font-family: DINPro-Medium;
        }
      }
      .rank1 {
        background: #f1f1f1;
        // height: .453333rem;
        // line-height: .453333rem;
        border-radius: 0.226667rem;
        position: absolute;
        top: 0.14rem;
        left: 0.12rem;
        z-index: 1;
        padding: 0.06rem 0.133333rem 0.03rem;
        p {
          font-size: 0.373333rem;
          line-height: 1;
          text-align: center;
          color: #666666;
          font-family: DINPro-Medium;
        }
      }
    }
    .right {
      width: 7.493rem;
      padding: 0 0.266rem 0 0.3rem;
      margin-top: 0.613333rem;
      display: flex;
      justify-content: space-between;
      .wid {
        font-size: 0.4rem;
        color: #222;
        text-align: left;
        p {
          width: 4rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        span {
          display: block;
          font-size: 0.32rem;
          color: #888;
        }
      }
      .total {
        font-size: 0.453333rem;
        color: #222;
        text-align: right;
        span {
          display: block;
          font-size: 0.32rem;
          color: #888;
        }
      }
    }
  }
  //板块划分
  .bgbg {
    width: 100%;
    height: 0.186667rem;
    background: #f1f1f1;
  }
  // 鼠标经过显示播放按钮
  .img_hov {
    border: none !important;
    img {
      display: block;
      width: 1.333rem;
      height: 1.333rem;
      border-radius: 0.266rem;
      object-fit: cover;
    }
  }
}
.invitation_enter_icon{
  position: fixed;
  width: 1.96rem;
  height: 2.1733rem;
  right: 0;
  bottom: 20vh;
  background: url(/static/invitation_index.gif) no-repeat center;
  background-size: 100% 100% !important;
  z-index: 3
}
.live_text {
  overflow: hidden;
  height: 0.706667rem;
}
/deep/ .van-swipe__track {
  height: 0.706667rem !important;
  .van-swipe-item {
    // transform: translateY(0.293333rem) !important;
    display: flex;
    height: 0.706667rem !important;
    justify-content: space-around;
    p {
      align-self: center;
      font-size: 0.266667rem;
      color: #888888;
      &:nth-child(2) {
        // font-family: Dinpro-medium;
        font-size: 0.293333rem;
        color: #222222;
      }
    }
  }
}
</style>
